<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>角色添加页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/css/font.css">
		<link rel="stylesheet" href="../../../static/css/weadmin.css">
  </head>
  
  <body>
    <div class="weadmin-body">
        <form class="layui-form" action="/admin/user/rolelist/addrole" method="post">
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="we-red">*</span>角色名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="rolename" name="rolename" autocomplete="off" value="" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  <span class="we-red">*</span>角色描述
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="" id="brief" name="brief" autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="we-red">*</span>角色的权限
              </label>
              <div class="layui-input-block">
                 <div id="test1"></div>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="add">
                  添加
              </button>
          </div>
      </form>
    </div>
    <script src="../../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
    	layui.extend({
				admin: '{/}../../../static/js/admin'
			});
	    layui.use(['form','layer','admin','jquery','transfer'], function(){
	      var form = layui.form,
	      admin = layui.admin,
	      layer = layui.layer;
        var $ = layui.jquery;

        $('#rolename').change(function(){
            let httpUrl = '/admin/user/rolelist/testing'
            let that = this
            $.post(httpUrl,{
              rolename:$('#rolename').val(),
            }).then(function(res){
              console.log(res)
              if(res.state == 'fail'){
                layer.msg(res.content,{
                icon: 2,
              })
              }
            })
          })

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data)
            //获得右侧数据
            var getData = transfer.getData('demo1');
            //提交的数据
            let sendData = {
              rolename:data.field.rolename,
              brief:data.field.brief,
              authlist:getData
            }
            console.log(sendData);
            $.ajax({
              url:"/admin/user/rolelist/addrole",
              method:"post",
              // contentType: "application/json;charset=utf-8",
              // data:JSON.stringify(sendData)
              data:sendData
            }).then(function(res){ //提交后
              console.log(res);
              //发异步，把数据提交给nodejs
                layer.alert("添加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
                //添加成功后刷新页面
                parent.location.reload();
            });
            })
            return false;
          });

          //穿梭框
          var transfer = layui.transfer;
          //通过ajax获取数据后进行渲染
          $.ajax({
            url:'/admin/user/authlist/api/authlistAll',
            method:"get",

          }).then((res)=>{
            //操作
            let data = res.data;
            let arr = []
            data.forEach(function(item,i){
              arr[i] = {
                "value": item.id,
                "title": item.authname,
                "disabled": "",
                "checked": ""
              }
            });
            //渲染
            transfer.render({
              elem: '#test1'  //绑定元素
              ,data: arr
              ,title:["所有权限","拥有的权限"]
              ,id: 'demo1' //定义索引
            });
          })
        });
    </script>
  </body>

</html>